iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
1
Modern Web

Vue.JS且戰且飛系列 第 25

Vue.JS且戰且飛(二十五)

  • 分享至 

  • xImage
  •  

官方範例-Markdown編輯

官方jsfiddle


25.php

<html>
<head>
    <meta charset="UTF-8">
    <title>官方範例-Markdown編輯</title>
</head>
<body>
<div id="show">
    <textarea :value="input" @input="update"></textarea>
    <div v-html="compiledMarkdown"></div>
</div>
</body>
<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>
<script src="vue.js"></script>
<script>

    new Vue({
        el: '#show',
        data: {
            input: '# hello'
        },
        computed: {
            compiledMarkdown: function () {
                return marked(this.input, {sanitize: true})
            }
        },
        methods: {
            update: _.debounce(function (e) {
                this.input = e.target.value
            }, 300)
        }
    })
</script>
</html>

上一篇
Vue.JS且戰且飛(二十四)
下一篇
Vue.JS且戰且飛(二十六)
系列文
Vue.JS且戰且飛30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言